<template>
    <div class="bg-List">
        <div class="header" id="sell-height">
            <img src="../../images/left.png" alt="" @click="$router.go(-1)">
            <span v-if="is_newcomer == 1">新手任务大厅</span>
            <span v-else-if="is_newcomer == 0">普通任务大厅</span>
            <span v-else-if="is_newcomer == 2">限时专属任务大厅 <em class="lv" >限制放宽</em></span>
            <select name="" id="consumersTab" v-model="consumer_id">
                <option :value="consumers.consumer_id" v-for="consumers in consumersTab">{{ consumers.login }}</option>
            </select>
        </div>
        <div class="swiper-container swiper1 swiper-container-horizontal swiper-container-free-mode"
             v-if="is_newcomer == 0 || is_newcomer == 2" id="sell-height1">
            <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
                <div class="swiper-slide" :value="type.val" v-on:click="setData(type.val,type,1)" v-for="type in types"
                     :class="{active: activeName == type, 'active-return': returnNumber && type.val == 10}">
                    <p>{{ type.name }}</p>
                    <p class="numbertype" v-for="typenum in typesname" v-if="typenum.type == type.val"><span>{{ typenum.val }}</span>
                    </p>
                </div>
            </div>
        </div>

        <!--<div id="mescroll" class="mescroll" style="overflow: auto">-->

        <!--</div>-->
        <p class="is_newcomerHead" v-if="is_newcomer == 1" id="sell-height2">仅新手可以领取</p>
        <!--<div class="is_newcomerHead Head-nocome clearfix" v-else-if="is_newcomer == 0 || is_newcomer == 2" id="sell-height2">-->
            <!--<ul>-->
                <!--<li>进行中 <span>{{ message.going }}</span></li>-->
                <!--&lt;!&ndash;<li>待审核 <span>{{ message.audit }}</span></li>&ndash;&gt;-->
                <!--<li style="color:#FE096B;padding-right: 0">未通过 <span>{{ message.not_pass }}</span></li>-->
            <!--</ul>-->
            <!--<p class="fr Head-nocome-right" v-if="message.not_pass">{{ time }}后自动放弃</p>-->
            <!--<p class="fr Head-nocome-right" v-else><span-->
                <!--style="display: inline-block;padding-top: 0.05rem">如未通过请修改提交</span></p>-->
        <!--</div>-->
        <div class="moduleBox">
            <p style="background: #F24D31;" v-if="message.not_pass">未通过【{{ message.not_pass }}】请尽快修改后提交<em v-if="time">【{{ time }}】</em></p>
            <p style="background: #59ADFE;" v-if="return_consumer">{{ return_consumer }}有回访可领</p>
        </div>
        <div class="mutlist" style="overflow-y: scroll;background: #f2f2f2;" :style="{ height: screen }">
            <my-load-more :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                          :auto-fill="false" ref="loadmore">


                <div class="mutlist_body" id="mutlist_body">
                    <div v-if="activeName.val != 10">
                        <div class="goodWokrs clearfix" v-for="task in tasks" @click="toastdata(task.list.user_money, task.list.sort)">
                            <img src="../../images/questionIcon.png" alt="" class="questionIcon"
                                 v-if="task.list.question && task.list.question != 'NULL'">
                            <div class="titleH3 fl">
                                <h3 class="Bigcolor">{{ task.list.type }}</h3>
                                <img :src="task.list.image" v-if="task.list.image.indexOf('http') != -1"
                                     :onerror="defaultImg()"/>
                                <img :src=" qiniu_domain +task.list.image" v-else :onerror="defaultImg()"/>
                                <img src="../../images/defaultImg.png" alt="" class="defaultImg">
                            </div>
                            <div class="fr_workText fl">
                                <div class="Numlists">
                                    <div class="linder">
                                        <div class="titleNewimg">
                                            <img src="../../images/homese1.png"/>
                                            <span>{{ task.list.goods_title }}</span>
                                        </div>
                                        <div class="workNeed" v-if="task.list.sort != '1000000000' && is_lottery == '1'">
                                            <span class="tj">每做<i>{{ lottery_min_recommend_get }}个</i>推荐任务 奖励<i>{{ lottery_min_recommend_get_number }}次</i>抽奖</span>
                                        </div>
                                        <div class="workNeed" v-else>
                                            <span>{{ task.list.items }}</span>
                                        </div>
                                        <div class="moneyYmoney">
                                            <img src="../../images/privilege-money.png"/>
                                            <span>{{ task.list.user_money }}</span>
                                            <em class="reward" v-if="task.list.reward">
                                                <ul>
                                                    <li>加赏{{ task.list.reward.job_meta_value }}</li>
                                                </ul>
                                            </em>
                                            <img src="@/images/privilege-jifen.png" style="margin-left: 0.5rem"/>
                                            <span style="color: #A1D0FC" v-if="task.list.sort == '1000000000'">{{ finish_work_credit }}</span>
                                            <span style="color: #A1D0FC" v-else>{{ credit_multiple }}</span>
                                            <span class="tuijian"  v-if="task.list.sort != '1000000000'">推荐</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="fr_btnPutwork">
                                <button v-on:click="submit(task.list.work_id)">领取</button>
                            </div>
                        </div>
                    </div>
                    <div v-else id="return-body">
                        <div class="goodWokrs clearfix" v-for="task in tasks">
                            <img src="../../images/questionIcon.png" alt="" class="questionIcon"
                                 v-if="task.question && task.question != 'NULL'">
                            <div class="titleH3 fl">
                                <h3 class="Bigcolor" v-if="task.type.text">{{ task.type.text }}</h3>
                                <img :src="task.image.url" v-if="task.image.url.indexOf('http') != -1"
                                     :onerror="defaultImg()"/>
                                <img :src=" qiniu_domain +task.image.url" v-else :onerror="defaultImg()"/>
                                <img src="../../images/defaultImg.png" alt="" class="defaultImg">
                            </div>
                            <div class="fr_workText fl">
                                <div class="Numlists">
                                    <div class="linder">
                                        <div class="titleNewimg">
                                            <img src="../../images/homese1.png"/>
                                            <span>{{ task.goods.goods_title }}</span>
                                        </div>
                                        <div class="workNeed">
                                            <span>领取后查看任务的要求以及佣金</span>
                                        </div>
                                        <div class="moneyYmoney">
                                            <img src="../../images/privilege-money.png"/>
                                            <span>???</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p></p>
                            <div class="fr_btnPutwork">
                                <button v-on:click="submit(task.job_id)">领取</button>
                            </div>
                        </div>
                        <img src="@/images/returnLogo.png" alt="" class="returnLogo">
                    </div>
                    <p class="ts-txt">如果看不到任务  请切换任务号刷新</p>
                    <p class="ts-txt" style="margin-top: .1rem">推荐【每隔5分钟】【半点】【整点】 刷新任务比较多</p>
                    <p class="ts-txt" style="margin-top: .1rem">新人可到首页新手任务大厅领取受保护任务</p>
                </div>

                <!--<template slot="bottom">-->
                    <!--<div id="distinct-body" v-if="userData">-->
                        <!--<div class="distinct-top clearfix">-->
                    <!--<span>-->
                        <!--<img src="@/images/distinct-icon1.png" alt="">-->
                        <!--用户等级 <em>LV{{ userData.user_level }}</em>-->
                    <!--</span>-->
                        <!--</div>-->
                        <!--<div class="distinct-top clearfix">-->
                    <!--<span>-->
                        <!--<img src="@/images/distinct-icon2.png" alt="">-->
                        <!--任务积分 <em>{{ userData.user_credit }}</em>-->
                    <!--</span>-->
                        <!--</div>-->
                        <!--<div class="distinct-top distinct-bottom clearfix">-->
                    <!--<span>-->
                        <!--<img src="@/images/distinct-icon3.png" alt="">-->
                        <!--等级特权-->
                        <!--<i>佣金排序区间{{ userData.price_min }} ~ {{ userData.price_max }}</i>-->
                        <!--<i>任务去重</i>-->
                    <!--</span>-->
                        <!--</div>-->

                    <!--</div>-->
                <!--</template>-->
            </my-load-more>
        </div>
        <label for="distinct" class="distinct-label"><input type="checkbox" v-model="distinct"
                                                            @click="distinctFun(distinct = !distinct)"
                                                            id="distinct"><i>相同任务太多？<em v-if="!distinct">任务去重</em><em v-else>已去重</em></i></label>
        <div class="fixed_color"></div>
    </div>

</template>

<script>
    import api from '../../utils/api';
    import GetQuery from '../../utils/sign';
    // import MeScroll from 'mescroll.js';
    // import 'mescroll.js/mescroll.min.css';
    import _ from 'lodash';
    import VueBetterScroll from 'vue2-better-scroll'
    import MyLoadMore from '../components/MyLoadMore'

    export default {
        name: 'List',
        data() {
            return {
                mescroll: null,
                page: 0,
                type: 0,
                tasks: [],
                types: [
                    {
                        name: '全部',
                        val: '0'
                    }, {
                        name: '回访',
                        val: '10'
                    }, {
                        name: '搜索',
                        val: '1'
                    }, {
                        name: '直通车',
                        val: '2'
                    }, {
                        name: '二维码',
                        val: '3'
                    }, {
                        name: '聚划算',
                        val: '4'
                    }, {
                        name: '淘抢购',
                        val: '5'
                    }, {
                        name: '淘口令',
                        val: '6'
                    }, {
                        name: '大型活动',
                        val: '7'
                    }, {
                        name: '自定义任务',
                        val: '8'
                    }, {
                        name: '红包任务',
                        val: '9'
                    }
                ],
                consumer_id: 0,
                activeName: '',
                consumersTab: [],
                allLoaded: false,
                screen: 0,
                is_newcomer: false,
                qiniu_domain: localStorage.getItem('qiniu_domain'),
                message: [],
                time: false,
                loadbotHeight: true,
                sort: false,
                returnNumber: false,
                distinct: false,
                typesname: false,
                userData: false,
                credit_multiple: false, // 推荐积分
                finish_work_credit: false, // 积分
                sort_credit: false, //是否是推荐任务,
                lottery_min_recommend_get: localStorage.getItem('lottery_min_recommend_get'),
                lottery_min_recommend_get_number: localStorage.getItem('lottery_min_recommend_get_number'),
                is_lottery: localStorage.getItem('is_lottery'),
                return_consumer: ''
            }
        },
        components: {
            VueBetterScroll,
            MyLoadMore
        },
        async created() {
            this.credit_multiple = parseInt(localStorage.getItem('credit_multiple'))
            this.finish_work_credit = parseInt(localStorage.getItem('finish_work_credit'))

            // this.$route.params.is_newcomer == 0 ? this.is_newcomer = false : this.is_newcomer = true;
            this.is_newcomer = this.$route.params.is_newcomer;

            this.consumer_id = localStorage.getItem('consumersId')
            let consumers = await api.request('/consumers/normal', 'get', {})
            this.consumersTab = consumers.data.data
            // localStorage.setItem('consumersId',consumers.data.data[0].consumer_id);



        },
        mounted() {

            // 第一个高亮
            if (GetQuery.GetQueryString('type') && GetQuery.GetQueryString('type') != 1) {
                this.type = GetQuery.GetQueryString('type').split('?')[0];
                for (let i in this.types) {
                    if (this.types[i].val == GetQuery.GetQueryString('type').split('?')[0]) {
                        this.activeName = this.types[i];
                    }
                }
            } else {
                this.activeName = this.types[0];
            }

            // 滑动组件
            new Swiper('.swiper1', {
                slidesPerView: 5,
                onTransitionEnd: function (swiper) {
                    if (swiper.progress == 1) {
                        swiper.activeIndex = swiper.slides.length - 1
                    }
                }
            });

        },
        methods: {
            // 刷新数量
            workNums(){

                var url = '/workNums';
                if(this.is_newcomer == 2){
                    url = '/cross_platform/workNums'
                }
                api.request(url, 'get', {'consumer_id': this.consumer_id}).then((resp) => {
                    this.typesname = resp.data.data;
                    this.userData = resp.data.message
                })
            },
            loadBottom(distinctType = false) {
                this.workNums()
                if (distinctType) {
                    this.page = 0;
                    this.tasks = []
                }
                var url = '/works';
                let params = {
                    consumer_id: this.consumer_id,
                    page: this.page,
                    sort: this.sort
                }
                if (this.is_newcomer == 1) {
                    params.is_newcomer = true
                } else if(this.is_newcomer == 0 || this.is_newcomer == 2){
                    params.type = this.type
                }
                if(this.is_newcomer == 2){
                    url = '/cross_platform/works'
                }
                if (this.type == 10) {
                    url = '/returnWorks'
                }
                api.request(url, 'get', params).then((resp) => {
                    let arr = resp.data.data;
                    this.returnConsumer(resp.data.message.return)
                    if (arr.length >= 1) {
                        this.page = arr[arr.length - 1]._id;
                        if (arr[arr.length - 1].list) {
                            this.sort = arr[arr.length - 1].list.sort;
                        } else {
                            this.sort = false
                        }
                        if (this.sort) {
                            if (this.distinct) {
                                this.tasks = _.unionBy(this.tasks.concat(arr), t => {
                                    return t.list.goods_title
                                })
                            } else {
                                this.tasks = this.tasks.concat(arr);
                            }

                        }

                        if (this.loadbotHeight) {
                            this.$nextTick(() => {
                                this.cilenHeight()
                                this.loadbotHeight = false
                            })
                        }
                        this.$refs.loadmore.onBottomLoaded();
                    } else {
                        this.$refs.loadmore.onBottomLoaded();
                    }
                    this.message = resp.data.message;


                })
            },
            loadTop(typeData, type) {

                this.workNums()
                if (!type) {
                    type = this.type
                }
                var url = '/works'
                let params = {
                    consumer_id: this.consumer_id,
                    page: 0
                }
                if (this.is_newcomer == 1) {
                    params.is_newcomer = true
                } else if(this.is_newcomer == 0) {
                    params.type = type
                }
                if (type == 10) {
                    url = '/returnWorks'
                }
                if(this.is_newcomer == 2){
                    url = '/cross_platform/works'
                }
                api.request(url, 'get', params).then((resp) => {
                    let arr = resp.data.data;
                    this.returnConsumer(resp.data.message.return)
                    this.tasks = [];
                    if (typeData) {
                        this.activeName = typeData;
                    }
                    this.type = type;
                    this.message = resp.data.message;
                    if (arr.length >= 1) {
                        this.page = arr[arr.length - 1]._id;
                        if (arr[arr.length - 1].list) {
                            this.sort = arr[arr.length - 1].list.sort;
                        }
                        if (this.distinct) {
                            this.tasks = _.unionBy(arr, t => {
                                return t.list.goods_title
                            })
                        } else {
                            this.tasks = arr;
                        }
                        this.$refs.loadmore.onTopLoaded();
                    } else {
                        this.$refs.loadmore.onTopLoaded();
                    }
                    if (resp.data.message.last_expire) {
                        this.endTime = new Date(parseInt(resp.data.message.last_expire) * 1000).toLocaleString('chinese', {hour12: false})
                        let time = setInterval(() => {
                            if (this.flag === true) {
                                clearInterval(time)
                                this.flagShow = false
                            } else {
                                this.flagShow = true
                            }
                            this.timeDown()
                        }, 1000)
                    }
                })
            },
            returnConsumer(data) {
                let lis = ''
                for (let i in data){
                    lis += '【' + data[i] +'】'
                }
                this.return_consumer = lis
            },
            get(object, path, defaultValue) {
                return _.get(...arguments);
            },
            // 获取任务列表
            async setData(type = 0, typeData, returnnum = 2) {
                if (returnnum == 1) {
                    this.returnNumber = false
                }
                this.loadTop(typeData, type)
            },
            // 领取任务
            async submit(work_id) {
                var crossType = false;
                let param = {
                    consumer_id: this.consumer_id
                }
                var url = '/works/create'
                if (this.type == 10) {
                    param.job_id = work_id
                    url = '/works/returnCreate'
                } else {
                    param.work_id = work_id;
                    url = '/works/create'
                }

                if(this.is_newcomer == 2){
                    url = '/cross_platform/create';
                    crossType = true
                }
                let resp = await api.request(url, 'post', param)
                let id = resp.data.data.work_user_id

                this.$router.push({
                    path: `/task/detail/${id}`,
                    // query: {
                    //     cross: crossType
                    // }
                })
                // let domin = localStorage.getItem('domin')
                // window.AndroidWebView.PictureCallback(`${domin}task/detail/${id}`, '任务详情');
            },
            timeDown() {
                const endTime = new Date(this.endTime)
                const nowTime = new Date();
                let time = '';
                let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))
                if (leftTime <= 0) {
                    this.flag = true;
                    return false;
                }
                d != 0 ? time += d + '天' : '';
                h != 0 ? time += h + '小时' : '';
                m != 0 ? time += m + '分' : '';
                this.time = time + s + '秒'
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
            cilenHeight() {
                let title = document.getElementById('sell-height').clientHeight;
                // let date = document.getElementById('sell-height2').clientHeight;
                let Height = title
                if (this.is_newcomer == 0) {
                    var nav = document.getElementById('sell-height1').clientHeight;
                    Height += nav
                }
                this.screen = (window.screen.height - Height) - 40 + 'px';
                this.$nextTick(() => {
                    document.querySelector('.mutlist').scrollTop = 0
                })
            },
            formatStr(str) {
                var head = str.substring(0, 5, str.length);
                var last = str.substring(5, str.length);
                return head + '*'.repeat(last.length);
            },
            // 默认图片
            defaultImg() {
                return 'this.src="' + require('@/images/defaultImg.png') + '"'
            },
            distinctFun(val) {
                this.loadBottom(true)
            },
            toastdata(user_money, sort) {
                var jf = 0
                if (sort == '1000000000'){
                    jf = this.finish_work_credit
                }else {
                    jf = this.credit_multiple
                }
                this.$toast('佣金：' + user_money + '　　积分：' + jf)
            }
        },
        watch: {
            async consumer_id(newValue) {
                localStorage.setItem('consumersId', newValue);
                this.cilenHeight()
                this.sort = false;
                this.page = 0;
                this.tasks = []
                this.loadTop()
                if(!this.typesname){
                    var url = '/workNums';
                    if(this.is_newcomer == 2){
                        url = '/cross_platform/workNums'
                    }
                    api.request(url, 'get', {'consumer_id': this.consumer_id}).then((resp) => {
                        this.typesname = resp.data.data;
                        this.userData = resp.data.message
                    })
                }
                // 回访任务数量
                await api.request('/returnNumber', 'get', {consumer_id: this.consumer_id}).then((resp) => {
                    this.returnNumber = resp.data.data
                })
                // if (this.returnNumber) {
                //     let type = {
                //         name: '回访任务',
                //         val: 10
                //     }
                //     this.setData(10, type)
                // }

            }
        }
    }
</script>
<style scoped>
    #consumersTab {
        position: absolute;
        right: .5rem;
        top: 0.3rem;
        width: 3rem;
        border: 0;
        background: #5AACFE;
        color: #fff;
        border: 1px solid #fff;
        outline: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 0.1rem;
    }

    #consumersTab option {
        background: #fff;
        color: #000;
    }

    .mutlist_body {
        /*padding-top: 1rem;*/
        /*padding-bottom: 1rem;*/
        box-sizing: border-box;
        padding: .2rem;
        padding-bottom: 1.5rem;
        background: #f2f2f2;
    }

    .Head-nocome li {
        float: left;
        font-size: .3rem;
        padding-left: .5rem;
        padding-top: 0.05rem;
    }

    .Head-nocome p {
        font-size: .3rem;
        background: #FFEB6E;
        color: #000;
        padding: .01rem .2rem;
        border-radius: .2rem;
        position: relative;
        line-height: .55rem;
        box-sizing: border-box;
    }

    /*.Head-nocome p:before {*/
    /*width: 0;*/
    /*height: 0;*/
    /*content: '';*/
    /*display: inline-block;*/
    /*border-top: .1rem solid transparent;*/
    /*border-right: .2rem solid #FFEB6E;*/
    /*border-bottom: .1rem solid transparent;*/
    /*position: absolute;*/
    /*left: -.4rem;*/
    /*top: -.1rem;*/

    /*}*/

    .Head-nocome {
        padding: 0rem .2rem
    }

    .swiper1 {
        margin: 0;
        height: 1rem;
        line-height: 1rem;
    }

    .Head-nocome-right {
        line-height: .6rem;
        margin-top: .15rem;
    }

    .active-return {
        color: red;
        /*border-bottom: 0.05rem solid red;*/
    }

    .returnLogo {
        width: 60%;
        display: block;
        margin: 1rem auto;
    }

    .swiper1 .swiper-slide p {
        font-weight: 600;
        font-size: .4rem;
        line-height: 0.5rem;
        height: auto;
        font-weight: 400;
        padding-top: 0.2rem
    }

    .swiper1 .swiper-slide p.numbertype {
        font-size: 0.4rem;
        padding-top: 0rem;
    }

    .swiper1 {
        height: 1.3rem;
        background: #fff;
    }

    .swiper1 .swiper-slide {
        height: 1.2rem;
    }

    .swiper1 .swiper-slide.active {
        border-bottom: 0.05rem solid #5AACFE;
    }

    #distinct-body {
        background: #fff;
        color: #fff;
        /*position: fixed;*/
        padding: .2rem 0.2rem;
        z-index: 30;
        font-size: .3rem;
        width: 100%;
        box-sizing: border-box;
        bottom: 0;
    }

    #distinct-body .distinct-top {
        color: #999;
        text-align: left;
        line-height: 0.5rem;
        margin-top: 0.1rem;
    }

    #distinct-body .distinct-top img {
        width: 0.4rem;
        vertical-align: middle;
        display: inline-block;
        margin-top: -0.1rem;
    }

    #distinct-body .distinct-top em {
        color: #5AACFE;
    }

    #distinct-body .distinct-bottom i {
        background: #A1D0FF;
        color: #fff;
        border-radius: 0.05rem;
        padding: 0.05rem 0.2rem;
        padding-top: 0.1rem;
        font-size: 0.01rem
    }

    .distinct-label {
        background: rgba(255, 255, 255, .9);
        position: fixed;
        bottom: .2rem;
        left: .2rem;
        padding: .15rem .3rem;
        border-radius: .2rem;
        color: #000;
        z-index: 9999;
        font-weight: 600;
        font-size: .4rem;
        -webkit-box-shadow: 0 0 0.2rem #0CA3F9;
        box-shadow: 0 0 0.2rem #0CA3F9;
    }

    .distinct-label input {
        display: none;
    }

    .distinct-label em {
        color: #5AACFE
    }

    /*#distinct-body em {*/
    /*color: #5AACFE;*/
    /*}*/
    /*#distinct-body input {*/
    /*margin: 0;*/
    /*vertical-align: top;*/
    /*width: .5rem;*/
    /*height: .5rem;*/
    /*margin-right: .1rem;*/
    /*}*/
    .header {
        text-align: left;
        padding-left: 1rem;
    }

    .header .lv {
        background: #fff;
        color: #5AACFE;
        font-size: 0.2rem;
        padding: 0 .3rem;
        padding-top: 0.03rem;
        border-radius: 0.1rem;
        margin-left: 0.2rem;
    }
    /*.bg-List {*/
        /*position: absolute;*/
        /*height: 100%;*/
        /*width: 100%;*/
        /*background: #F0F2F3;*/
    /*}*/
    .fixed_color {
        background: #f2f2f2;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
</style>
